<!-- 积分管理 -->
<template>
  <div class="stored_value_manager">
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <div class="btn-box">
          <el-button type="primary" @click="add">单个用户积分</el-button>
          <el-button type="primary" @click="openImport">批量用户积分</el-button>
        </div>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-date-picker v-model="date" type="daterange" range-separator="~" start-placeholder="开始时间"
              end-placeholder="结束时间" value-format="YYYY-MM-DD" @change="searchDate" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="phone" @keyup[native].enter="searchPhone" @change="searchPhone" placeholder="手机号" clearable
              :suffix-icon="Search" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="reason" @keyup[native].enter="searchReason" @change="searchReason" placeholder="说明"
              clearable :suffix-icon="Search" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="remark" @keyup[native].enter="searchRemark" @change="searchRemark" placeholder="备注"
              clearable :suffix-icon="Search" />
          </el-form-item>
        </el-form>
      </div>
      <div class="base_main_margin_top">
        <StatusBar :data="statusList" default="all" />
      </div>
      <div class="base_main_header">
        <el-button type="primary" text @click="delRefuseData">删除未通过记录</el-button>
        <el-button type="primary" text @click="exportData">导出</el-button>
      </div>
      <DataCollectTable :data="data" :config="config" :total="total" @operationsHander="opHander.receive" />

      <el-dialog v-model="dialogVisible" title="单个用户积分" width="35%" top="20vh" class="base_dialog"
        @open="resetForm(formRef)">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="用户手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入用户手机号" />
          </el-form-item>
          <el-form-item label="积分" prop="integral">
            <el-input v-model.number="form.integral" clearable placeholder="请输入储值金额（正数为增加，负数为减少）" />
          </el-form-item>
          <el-form-item label="说明" prop="changeReason">
            <el-input v-model="form.changeReason" type="textarea" clearable placeholder="请输入说明" resize="none" />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" type="textarea" clearable placeholder="请输入备注" resize="none" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </el-main>
  </div>
</template>

<script setup>
import StatusBar from "@com/StatusBar.vue";
import { $msg, $box } from "@ui/msg";
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import useRoute from "@util/router";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  COLUMN_TYPE,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import $ from "@util/base";
import api from "@api/points";

const route = useRoute();

route.watchRouter("pointsmanager", () => {
  getData();
});

const statusList = reactive([
  {
    label: "全部",
    value: "all",
    total: 0,
  },
  {
    label: "待审批",
    value: "1047002",
    total: 0,
  },
  {
    label: "已通过",
    value: "1047001",
    total: 0,
  },
  {
    label: "已驳回",
    value: "1047003",
    total: 0,
  },
]);

const data = ref([]);
const total = ref(0);

function getOperations(data) {
  if (data.validStatus == "1047003") {
    return [OPERATIONS.check, OPERATIONS.del];
  } else {
    return [OPERATIONS.check];
  }
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: getOperations,
  },
  column: [
    {
      label: "姓名",
      prop: "memberName",
      width: 120,
    },
    {
      label: "账号",
      prop: "memberLoginName",
    },
    {
      label: "积分余额（分）",
      prop: "balanceMoney",
      width: 130,
    },
    {
      label: "操作积分（分）",
      prop: "changeMoney",
      width: 140,
    },
    {
      label: "备注",
      prop: "remark",
    },
    {
      label: "操作人",
      prop: "creatorName",
      width: 120,
    },
    {
      label: "审核状态",
      prop: "validStatusName",
      width: 100,
    },
    {
      label: "操作时间",
      prop: "createTime",
      width: 180,
    },
  ],
};

const dialogVisible = ref(false);

const formRef = ref(null);

const form = reactive({
  phone: null,
  integral: null,
  changeReason: null,
  remark: null,
});

function show() {
  dialogVisible.value = true;
}

function add() {
  show();
}

const rules = {
  phone: [
    {
      required: true,
      message: "请输入用户手机号",
      trigger: "blur",
    },
  ],
  integral: [
    {
      required: true,
      message: "请输入积分",
      trigger: "blur",
    },
    {
      type: "number",
      message: "请输入数字",
    },
  ],
  changeReason: [
    {
      required: true,
      message: "请输入说明",
      trigger: "blur",
    },
  ],
  remark: [
    {
      required: true,
      message: "请输入备注",
      trigger: "blur",
    },
  ]
};

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      userStoredValue(form);
    }
  });
};

function userStoredValue(data) {
  api.add(data, () => {
    $msg.succ("新增成功");
    dialogVisible.value = false;
    getData();
  });
}

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

function openImport() {
  route.push({
    name: "batchpointsimport",
  });
}

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  route.push({
    name: "pointsdetails",
    query: { type: "show", code: data.id },
  });
});

opHander.install(OP_KEY.delete, (data) => {
  $box.open(
    "删除确认",
    `是否删除${data.memberLoginName}账号，该笔积分记录`,
    () => {
      api.delete(data.id, () => {
        $msg.succ("删除成功");
        getData();
      });
    }
  );
});

const phone = ref(route.query().phone || "");
const reason = ref(route.query().reason || "");
const remark = ref(route.query().remark || "");
const date = ref(route.query().date || []);

// const activeName = ref('deposit');

function searchPhone(val) {
  route.replaceQuery("phone", val);
}

function searchReason(val) {
  route.replaceQuery("reason", val);
}

function searchRemark(val) {
  route.replaceQuery("remark", val);
}

function searchDate(val) {
  route.replaceQuery("date", val);
}

getData();
function getData() {
  getList();
  getStatusNum();
}

function getList() {
  let routeQuery = route.query();
  api.list(
    {
      depositType: routeQuery.type === "freeze" ? "1048002" : "1048001",
      phone: routeQuery.phone,
      changeReason: routeQuery.reason,
      remark: routeQuery.remark,
      date: routeQuery.date,
      status: routeQuery.status,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
      total.value = val.total;
      data.value = val.list.map((e) => {
        if (e.changeMoney > 0) {
          e.changeMoney = `+${e.changeMoney}`;
        }
        return e;
      });
    }
  );
}

function delRefuseData() {
  api.delRefuseData(() => {
    $msg.succ("删除成功");
    getData()
  })
}

function exportData(){
  let routeQuery = route.query();
  api.exportData(
    {
      depositType: routeQuery.type === "freeze" ? "1048002" : "1048001",
      phone: routeQuery.phone,
      changeReason: routeQuery.reason,
      remark: routeQuery.remark,
      date: routeQuery.date,
      status: routeQuery.status,
      page: routeQuery.p,
      size: routeQuery.s,
    },
    (val) => {
       $.download(val.url, "积分列表导出")
    }
  );
}

function getStatusNum() {
  let routeQuery = route.query();
  api.statusNum(
    {
      phone: routeQuery.phone,
      changeReason: routeQuery.reason,
      remark: routeQuery.remark,
      date: routeQuery.date,
      status: routeQuery.status,
    },
    (val) => {
      statusData(val, "status");
    }
  );
}

function statusData(val, type) {
  statusList.forEach((e, i) => {
    e.total = val[i];
  });
}
</script>

<style lang="scss">
.stored_value_manager {
  .btn-box {
    width: 340px;

    .el-button {
      &:first-child {
        margin-right: 10px;
      }
    }
  }

  .td_money_item {
    text-align: center;
    border: solid 1px $border;
    border-right: none;

    &:last-child {
      border-right: solid 1px $border;
    }

    .tdm_title {
      height: 50px;
      line-height: 50px;
      border-bottom: solid 1px $border;
      background-color: $background;
    }

    h2 {
      margin: 0;
      height: 80px;
      line-height: 80px;
    }
  }

  .td_money_item_sel {
    cursor: pointer;
  }

  .stored_order_tabs {
    // height: 100%;
    --el-tabs-header-height: 60px;
    border: none;

    .el-tabs__header {
      margin: 0;
    }

    .el-badge__content.is-fixed.is-dot {
      right: 0;
      top: 10px;
    }

    .el-tabs__content {
      // height: calc(100% - 60px);
      // overflow: hidden;
      margin: 0;
      padding: 0;
    }
  }

  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
}
</style>

